<template>
  <div>
    <el-card class="box-card">
      <breadCrumb title="商品列表"></breadCrumb>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input type="text" placeholder="请输入内容" v-model="query" />
            <el-button class="search" @click="doSearch"><i class="el-icon-search"></i></el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="$router.push('/goods/add')">添加用户</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column width="50" type="index">
        </el-table-column>
        <el-table-column label="商品名称" width="800">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goods_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品重量" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.goods_weight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatTime(scope.row.add_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.goods_id)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
          :page-sizes="[2, 4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- dialog  -->
    <el-dialog title="编辑商品" :visible.sync="showDialog" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="ruleForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="ruleForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="ruleForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="ruleForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goods_introduce">
          <el-input v-model="ruleForm.goods_introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsList, putGoods, delGoods, getSearch } from '@/api/goods'
import { formatTime } from '@/utils/index.js'
export default {
  name: 'ShoppingGoodsList',

  data () {
    return {
      showDialog: false,
      query: '',
      tableData: [],
      pagenum: 1,
      pagesize: 2,
      total: null,
      isEdit: false,
      formatTime,
      ruleForm: {
        goods_name: '',
        goods_introduce: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: ''
      },
      rules: {
        goods_name: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_introduce: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.goodsList()
  },

  methods: {
    doEdit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.showDialog = false
          await putGoods(this.ruleForm)
          this.goodsList()
        }
      })
    },
    async doSearch () {
      const res = await getSearch({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize })
      this.total = res.data.total
      this.tableData = res.data.goods
      this.goodsList()
    },
    // 分页器
    handleSizeChange (val) {
      this.pagesize = val
      console.log(`每页 ${val} 条`)
      this.goodsList()
    },
    handleCurrentChange (val) {
      this.pagenum = val
      console.log(`当前页: ${val}`)
      this.goodsList()
    },
    handleEdit (row) {
      this.showDialog = true
      console.log(row, '666')
      this.ruleForm = { ...row }
    },
    async handleDelete (id) {
      await delGoods(id)
      if (this.tableData.length === 1) {
        this.pagenum = Math.floor(this.total / this.pagesize)
      }
      this.goodsList()
    },
    async goodsList () {
      console.log({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize })
      const res = await getGoodsList({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize })
      this.total = res.data.total
      this.tableData = res.data.goods
    }
  }
}
</script>

<style lang="less" scoped>
.bg-purple {
  position: relative;

  .search {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
